<!-- 门店列表 -->
<template>
	<view class="content">
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click"
			@open="open" :options="options" btn-width="74" style="margin-bottom: 24rpx;">
			<view class="item u-border-bottom">				
				<view class="">
					<image  :src="item.images"></image>
				</view>
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="title-wrap">
					<view class="item-name">
						<text class="title">轻井泽(文三路店）</text>
						<text class="item-state">休息</text>
					</view>
					<view class="item-price">
						<text >结算折扣：7.5</text>
					</view>
					<view class="item-tool">
						<text class="tool-item u-m-r-16">收银员</text>
						<text class="tool-item u-m-r-16">编辑</text>
						<text class="tool-item">菜品</text>
					</view>
				</view>
			</view>
		</u-swipe-action>
		<view class="foot_box u-flex u-row-between u-col-center"><button class="u-reset-button save-btn"
				@tap="saveStore">增加门店</button></view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				storeList: [],
				storeId: uni.getStorageSync('storeId'),
				list: [{
						id: 1,
						title: '长安回望绣成堆',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					},{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
					}
				],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '营业',
						style: {
							backgroundColor: '#dd524d'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#007aff'
						}
					}
					
				]
			};
		},
		computed: {},
		onLoad() {
			this.getStoreAddress();
		},
		methods: {
			// 选择门店
			selStore(id) {
				this.storeId = id;
			},
			// 确认门店
			saveStore() {
				uni.setStorageSync('storeId', this.storeId);
				if (!this.storeId) {
					this.$u.toast('请选选择门店');
				} else {
					this.$Router.replace({
						path: '/pages/app/merchant/index'
					});
				}
			},
			// 获取门店列表
			getStoreAddress() {
				let that = this;
				that.$http('store.list').then(res => {
					if (res.code == 1) {
						that.storeList = res.data;
					}
				});
			},
			click(index, index1) {
				if (index1 == 1) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			}
		}
	};
</script>

<style lang="scss">
	.content{
		padding-bottom: 130rpx;
	}
	.title-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.item {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		// margin-bottom: 24rpx;
	}

	image {
		width: 160rpx;
		height: 160rpx;
		display: inline-block;
		margin-right: 24rpx;
		border-radius: 12rpx;
	}
	
	.item-name{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		.title {
			text-align: left;
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
			line-height: 42rpx;
		}
		.item-state{
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCAB51;
		}
	}
	.item-price{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FC5351;
		line-height: 36rpx;
	}
	.item-tool{
		margin-top: 26rpx;
		display: flex;
	}
	.tool-item{
		width: fit-content;
		border-radius: 26rpx;
		padding: 8rpx 16rpx 8rpx 18rpx;
		border: 1px solid #D1D2D5;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.tool-item:first-child{
		margin-left: auto;
	}
	.foot_box {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 30rpx;
	
		.save-btn {
			width: 100%;
			line-height: 80rpx;
			background: #FC5351;
			border: 1rpx solid rgba(238, 238, 238, 1);
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 40rpx;
		}
	}
</style>
